@import './var.less';

html, body, #app {
  height: 100%;
  .page {
    height: 100%;
  }
}
.page {
  background-color: @background-color-sys;
}

* {
  box-sizing: border-box;
}

a {
  color: @color-darkblue;
  text-decoration: none;
  font-size: 16px;
  &:active {
    opacity: .45;
  }
  &.disabled {
    pointer-events: none;
    color: #999;
  }
}

.bg--red {
  background-color: @color-red;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-red, 10%), @color-red);
  }
}
.bg--orange {
  background-color: @color-orange;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-orange, 10%), @color-orange);
  }
}
.bg--yellow {
  background-color: @color-yellow;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-yellow, 10%), @color-yellow);
  }
}
.bg--green {
  background-color: @color-green;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-green, 10%), @color-green);
  }
}
.bg--blue {
  background-color: @color-blue;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-blue, 10%), @color-blue);
  }
}
.bg--darkblue {
  background-color: @color-darkblue;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-darkblue, 10%), @color-darkblue);
  }
}
.bg--pink {
  background-color: @color-pink;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-pink, 10%), @color-pink);
  }
}
.bg--purple {
  background-color: @color-purple;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-purple, 10%), @color-purple);
  }
}
.bg--brown {
  background-color: @color-brown;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-brown, 10%), @color-brown);
  }
}
.bg--darkgray {
  background-color: @color-darkgray;
  &--linear {
    background: linear-gradient(45deg, lighten(@color-darkgray, 10%), @color-darkgray);
  }
}


.color--red {
  color: @color-red;
}
.color--orange {
  color: @color-orange;
}
.color--yellow {
  color: @color-yellow;
}
.color--green {
  color: @color-green;
}
.color--blue {
  color: @color-blue;
}
.color--darkblue {
  color: @color-darkblue;
}
.color--pink {
  color: @color-pink;
}
.color--purple {
  color: @color-purple;
}
.color--brown {
  color: @color-brown;
}
.color--darkgray {
  color: @color-darkgray;
}

.none-tips {
  color: #ccc;
  text-align: center;
  margin-top: 50%;
}